<template>
    <div @click.capture="closeDrown">
        <headerSearch :title="headTitle" :share="true" @done="gotobtn"></headerSearch>
    <!-- 下拉出现功能 -->
		<div class="dropDownpanel" v-if="drownshareShow">
            <span class="dropdown_triangle"></span>
            <!-- <a href="javascript:void(0)"><i class="iconfont icon-fenxiang4" ></i>分享名片</a> -->
            <a href="javascript:void(0)" @click="addCollect" v-if="!isCollect"><i class="iconfont icon-shoucang1"></i>收藏</a>
            <a href="javascript:void(0)" @click="removeCollect" v-else><i class="iconfont icon-shoucang1"></i>已收藏</a>
            <a href="javascript:void(0)" @click="shareClick"><i class="iconfont icon-fenxiang2"></i>分享</a>
        </div>
        <div class="content" style="background-color: #f5f5f5;" @click="closeDrown">
            <!-- 头部名片浮层 -->
            <div class="main_card_index" v-if="CardDetails.CardTemplate == 1">
                <div class="main_card_index_info-top"></div>
                <div class="main_card_index_info">
                    <div class="main_card_index_info_top clear">
                        <img :src="CardDetails.CardLogo" alt="">
                        <div class="main_card_index_info_center">
                            <h2 class="clear">
                                <!-- 名片名称 -->
                                <span v-if="CardDetails.CardName" class="fl">{{CardDetails.CardName}}</span> 
                                <span v-else class="fl">暂无填写名片名称</span>

                                <!-- 名片职位 -->
                                <span v-if="CardDetails.CardPosition" class="fl">{{CardDetails.CardPosition}}</span>
                                <span v-else class="fl">暂无填写职位</span>

                            </h2>

                            <p v-if="CardDetails.CardCompany">{{CardDetails.CardCompany}}</p>
                            <p v-else>暂无选择展示公司</p>
                        </div>
                    </div>
                    <div class="main_card_index_info_bottom">

                        <!-- 手机号码 -->
                        <p v-if="CardDetails.CardPhone">
                            <i class="iconfont icon-dianhua2"></i>
                            <a :href="'tel:' + CardDetails.CardPhone">{{CardDetails.CardPhone}}</a>
                            <a :href="'tel:' + CardDetails.CardPhone" class="small_span_color">立即通话</a>
                        </p>
                        <p v-else>
                            <i class="iconfont icon-dianhua2"></i>
                            <a href="javascript::">暂无填写手机号码</a>
                        </p>

                        <!-- 邮箱 -->
                        <p v-if="CardDetails.CardEmail">
                            <i class="iconfont icon-youxiang"></i>
                            <span>{{CardDetails.CardEmail}}</span>
                        </p>
                        <p v-else>
                            <i class="iconfont icon-youxiang"></i>
                            <span>暂无填写邮箱</span>
                        </p>


                        <p class="clear" v-if="CardDetails.CardCompanyAddress">
                            <i class="iconfont icon-dizhi1"></i>
                            <a href="javascript:void(0)">{{CardDetails.CardCompanyAddress}}</a>
                            <!-- <a href="javascript:void(0)" class="small_span_color" @click="location">马上定位</a> -->
                            <a href="javascript:void(0)" class="small_span_color" @click="MapPosition">马上定位</a>
                            <!-- <i class="iconfont icon-erweima fr" @click="erweimaClick()"></i> -->
                        </p>
                        <p class="clear" v-else>
                            <i class="iconfont icon-dizhi1"></i>
                            <a href="javascript:void(0)">暂无填写地址</a>
                            <!-- <i class="iconfont icon-erweima fr" @click="erweimaClick()"></i> -->
                        </p>


                        
                    </div>
                </div>
            </div>
            <div class="main_card_index" v-else>
                <div class="main_card_index_info-top"></div>
                <div class="main_card_index_info">
                    <div class="main_card_index_info_top clear">
                        <h6>我是丑丑的模板2</h6>
                        <img :src="CardDetails.CardLogo" alt="">
                        <div class="main_card_index_info_center">
                            <h2><span>{{CardDetails.CardName}}</span> <span>{{CardDetails.CardPosition}}</span></h2>
                            <p>{{CardDetails.CardCompany}}</p>
                        </div>
                    </div>
                    <div class="main_card_index_info_bottom">
                        <p>
                            <i class="iconfont icon-dianhua2"></i>
                            <a :href="'tel:' + CardDetails.CardPhone">{{CardDetails.CardPhone}}</a>
                            <a :href="'tel:' + CardDetails.CardPhone" class="small_span_color">立即通话</a>
                        </p>
                        <p>
                            <i class="iconfont icon-youxiang"></i>
                            <span>{{CardDetails.CardEmail}}</span>
                        </p>
                        <p class="clear">
                            <i class="iconfont icon-dizhi1"></i>
                            <a href="javascript:void(0)">{{CardDetails.CardCompanyAddress}}</a>
                            <a href="javascript:void(0)" class="small_span_color" @click="location">马上定位</a>
                            <!-- <i class="iconfont icon-erweima fr" @click="erweimaClick()"></i> -->
                        </p>
                    </div>
                </div>
            </div>
            <!-- 内容访问量 -->
            <div class="main_Headline_data" v-if="isShowTag">
                <small>访问量<em> {{CardDetails.access}} </em></small>
                <small>人气值<em> {{CardDetails.popularity}} </em></small>
                <small>分享数<em> {{CardDetails.share}} </em></small>
                <!-- <small class="data_jin">#IT互联网</small>
                <small class="data_jin">#诚信</small>
                <small class="data_jin">#大道至简</small> -->
            </div>
            <!--公司简介=-->
            <div class="look_container">
                <div class="title_text_more" >
                    <h3>公司简介</h3>
                </div>  
                <div class="main-company-index-description">
                    <div class="option_description">
                        <div class="userCard_check_img">
                            <img :src="options.log_img" alt="" v-if="options.log_img">
                            <img src="../common/images/youquan.png" alt="" v-else>
                        </div>
                    
                        <div style="text-align: left;">
                            <!-- <h3>{{options.name}}</h3> -->
                            <h3>{{CardDetails.company.name ? CardDetails.company.name : '暂无企业名称'}}</h3>
                            <p>{{CardDetails.company.website ? CardDetails.company.website : '暂无填写网站'}}</p>
                        </div>
                    </div>
                    <div class="option_tagNames">
                        <span v-for="(biao, b) in tags" :key="b">{{biao.label_name}}</span>
                    </div>
                    <p v-if="CardDetails.CardCompanyDesc">{{ CardDetails.CardCompanyDesc}}</p>
                    <p v-else>暂无填写网站简介</p>
                </div>
                <a href="javascript:;" class="btn_more" @click="btn_more(CardDetails.c_id)">查看企业&nbsp;<i class="iconfont icon-xiangyou"></i></a>
            </div>
            <!-- 产品列表 -->
            <div class="main-company-index_product look_container" v-if="isShowProduct">
                <div class="title_text_more">
                    <h3>产品列表</h3>
                    <a href="javascript:void(0)" @click="cardProduct">
                        更多<i class="iconfont icon-xiangyou"></i>
                    </a>               
                </div>  
                <!-- 三栏商品 -->
                <div class="host_item" id="js_host_item">
                   <!-- v-if="hostlist == ''" -->
                    <div class="emptyProduct" v-if="CardDetails.module.product.length == 0">
                        <img src="../common/images/empty.png" alt="">
                        <p>小主人，您的商品还没添加呢~请赶紧添加吧!</p>
                    </div>
                    <ul v-else>
                        <li v-for="(item, k) in CardDetails.module.product" :key="k" @click="jumpProduct(item.IDProduct)">
                            <a href="javascript:void(0)">
                                <small>
                                    <img src="../common/images/cm_03.jpg" v-if="item.smallImg == null">
                                    <img :src="item.smallImg" alt="" v-else>
                                </small>
                                <!-- <span>{{host.chrName}}</span> -->
                                <span class="hui_title">{{item.chrName}}</span>
                                <!-- <span>已售<strong>{{host.NumS}}</strong>件</span> -->
                                <span>已售<strong>{{item.NumS}}</strong>件</span>
                            </a>
                        </li>
                    </ul>
                </div> 			
            </div>  
            <!-- 新闻动态 -->
            <div class="main-company-index_product look_container" v-if="isShowNews">
              <div class="title_text_more">
                <h3>新闻动态</h3>
                <a href="javascript:void(0)" @click="cardNews">更多<i class="iconfont icon-xiangyou"></i></a>
              </div>
              <div class="info_list_home_page">
                <div class="emptyProduct" v-if="CardDetails.module.news.length == 0">
                    <img src="../common/images/empty.png" alt="">
                    <p>小主人，您的新闻还没添加呢~请赶紧添加吧!</p>
                </div>
                <ul v-else v-for="(initem, t) in CardDetails.module.news" :key="t" >
                  <li @click="newsdetailClick(initem.IDNews)" v-if="initem.img.length < 2">
                    <a href="javascipt:void(0)" class="clear">
                      <div class="new_info_single_img fl">
                        <img :src="initem.img[0]" alt="" v-if="initem.img[0]"> 
                        <img src="../common/images/cindex_41.jpg" v-else>
                      </div>
                      <!-- <p>{{initem.Title}}</p> -->
                      <p>{{initem.Title}}</p>
                      <p><span>{{initem.chrFrom}}</span><span>{{initem.dtCreate | dateFormat("yyyy-MM-dd")}}</span></p>
                      <!-- <p><span>{{initem.summary}}</span><span>{{initem.dtCreate}}</span></p> -->
                    </a>
                  </li>
                  <li  @click="newsdetailClick(initem.IDNews)" v-else>
                    <div class="info_home_page">
                      <!-- <p>{{initem.Title}}</p> -->
                      <p>{{initem.Title}}</p>
                      <ul>
                        <li v-for="(img, i) in initem.img" :key="i">
                          <a href="javascript:void(0)">
                              <span class="new_info_img fl">
                                <img class="info_home_img" :src="img">
                              </span>
                          </a>
                        </li>
                      </ul>
                      <!-- <p class="info_time"><span>{{initem.summary}}</span><span>{{initem.dtCreate}}</span></p> -->
                      <p class="info_time"><span>{{initem.chrFrom}}</span><span>{{initem.dtCreate | dateFormat("yyyy-MM-dd")}}</span></p>
                    </div> 
                  </li>
                </ul>
              </div>
            </div>
            <!-- 底部我也要制作和保存到通讯录 -->
            <div class="metoo_btn">
              <!-- <button @click="createCardToo">我也要制作</button> -->
              <a href="javascript:void(0)" @click="wantMain"><button>我也要制作</button></a>
              <a :href="'tel:' + CardDetails.CardPhone"><button>保存到通讯录</button></a>
            </div>
            <!-- <div class="intop" v-show="isShow" @click="intopClick">
                <img class="intop_img" :src="this.QRcode" alt="">
            </div> -->
            <!-- 分享按钮 -->
            <!-- <div class="view_card_share" :style="'right: ' + position ">
              <div class="share_hide_btn" @click="showFunc"><i class="iconfont icon-fanhui"></i></div>
              <div class="share_hide_collection">
                <div class="hide_collection" @click="addCollect" v-if="!isCollect"><i class="iconfont icon-shoucang"></i><span>收藏</span></div>
                <div class="hide_collection" @click="removeCollect" v-else><i class="iconfont icon-shoucang"></i><span>已收藏</span></div>
                <div class="hide_collection" @click="gotobtn"><i class="iconfont icon-fenxiang2"></i><span>转发</span></div>
              </div>
            </div> -->
            <!-- 分享引导 -->
            <div class="Share_guidance" @click="closeShare"  v-if="shareshow"></div>
            <shareTopage v-if="shareToShow" @wxdone="closeShare" @wxmessage="MessageShareData" @wxline="TimelineShareData"></shareTopage>
            <share v-if="isShow" @success="shareSuccess" @closeShare="closeShare" :title="CardDetails.CardName + '的名片'" :desc="'我是连接详情，您想我写点什么'" :link="shareLink" :Sharing="Sharing" :imgUrl="shareLink + cardImgUrl"></share>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import soFooter from '../components/footer-bar';
import share from '../components/WebShare.vue';
import shareTopage from '../components/shareTopage';
import wx from 'weixin-js-sdk';

    export default {
        data() {
            return {
                cardImgUrl: require('../common/images/UI-03.png'),
                headTitle: '名片查看',
                options: '',   //企业名称
                position: '-2.66rem', // 默认样式
                shareshow: false,
                // imgUrl: this.$path,
                access_token: '', // 令牌
                card_id: '', // 名片id
                CardDetails: {}, // 存放进来的名片数据
                Card: { // 请求数据
                    access_token: '',
                    user_id: 0
                },
                isShow:false,
                // isShow: false,
                // QRcode: '', // 二维码链接
                isCollect: false, // 是否已经收藏
                isShowProduct: false, // 是否显示产品模块
                isShowNews: false, // 是否显示新闻模块
                isShowTag: false, // 是否显示变迁模块
                isAddModule: false, // 是否添加模块
                addModuleList: {}, // 存放添加模块列表
                selectProduct: [], // 选中的产品
                selectNews: [], // 选中的新闻
                importFileUrl: this.$path + '/index.php/api/uploadLogo', // 上传头像的接口
                shareLink: '',
                tags: [],
                drownshareShow: false,   //遮罩层弹框
                Sharing: '',   //分享参数
                shareToShow: false,   //分享引导
            }
        },
        created() {
            let that = this;
            that.Card.access_token = window.localStorage.getItem('access_token')? window.localStorage.getItem('access_token') : '';
            that.Card.user_id = window.localStorage.getItem('userInfo')? JSON.parse(window.localStorage.getItem('userInfo')).uid : 0;
            that.card_id = that.$route.query.card_id;
            // 如果是通过名片首页点击分享跳进来，出现分享遮罩层
            that.shareshow = that.$route.query.shareshow == true? that.$route.query.shareshow : false;
            // that.shareLink = location.href.split('#')[0].replace('&shareShow=true', '');
            // that.shareLink = 'http://fc.x.e000.com/userCenter/viewCard?card_id=' + that.card_id;
            that.shareLink = this.$path;
            // that.BaiDumap();
            // 动态加载百度地图
            // 没用代码 jq写法
            if (!window.BMap) {
                var script = $('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=' + this.$baidu_map_ak + '"></sc' + 'ript>');
                var script2 = $('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=' + this.$baidu_map_ak + '&amp;services=&amp;t=20190123111209"></s' + 'cript>');
                $('body').append(script);
                $('body').append(script2);
                console.log('百度地图加载');
            }
        },
        mounted() {
            let that = this;
            that.getcarddetail();
            that.checkCollect();
            that.visit();
        },
        methods: {
            // 点击三个点提示分享引导
            shareClick() {
                if(typeof Wechat !='undefined'){   //安卓
                    console.log('进来安卓了');
                    this.shareToShow = true;
                }else{
                    console.log('进来浏览器')
                    //浏览器
                    var ua = navigator.userAgent.toLowerCase();
                    //微信浏览器
                    var isWeixin = ua.indexOf('micromessenger') != -1;
                    // this.shareshow = true;
                    //微信浏览器
                    this.isShow = true;
                    this.shareshow = true;
                }
                this.drownshareShow = false;
            },
            // 点击分享遮罩层关闭
            closeShare() {
                this.isShow = false;
                this.shareToShow = false;
                this.shareshow = false
            },
            //微信群 / 好友
            MessageShareData() {
                this.shareToShow = false;
                this.Sharing = 1;
                this.isShow = true;
                console.log('分享到好友');
            },
            //微信朋友圈
            TimelineShareData() {
                this.shareToShow = false;
                this.Sharing = 0;
                this.isShow = true;
                console.log('分享到微信朋友圈');
            },
            //下拉分享、收藏
            gotobtn() {
                this.drownshareShow = !this.drownshareShow;  //打开下拉分享、收藏
            },
            // 点击空白，下拉框收起
            closeDrown() {
                this.drownshareShow = false;
            },
            /**
             * 分享数+1
             */
            shareSuccess: function(){
                // alert('触发了分享成功回调函数');
                var data  = this.Card;
                data.module = 3;
                data.module_id = this.card_id;
                this.isShow = false;
                this.$post(this.$path + '/index.php/api/count/share', data).then((response) => {
                    console.log(response)
                })
            },
            /**
             * 访问量加1
             */
            visit: function(){
                var data  = this.Card;
                data.module = 3;
                data.module_id = this.card_id;
                this.$post(this.$path + '/index.php/api/count/visit', data).then((response) => {
                    
                    console.log(response)
                })
            },
            /**
             * 二维码显示隐藏
             */
            // erweimaClick() { 
            //     this.path = this.$path + '/UserCard/viewCard?card_id='+ this.card_id;
            //     this.QRcode = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+this.path;
            //     this.isShow = !this.isShow;
            // },
            //点击隐藏遮罩层
            // intopClick() {
            //     this.isShow = false;
            // },
             //定位浏览器判断
            MapPosition:function(){
                var ua = navigator.userAgent.toLowerCase();
            　　  var isWeixin = ua.indexOf('micromessenger') != -1;
            　　  if (isWeixin) {  //微信
                    console.log('微信浏览器的');
                    this.location();
            　　  }else{          //普通浏览器
                    console.log('普通浏览器的');
                    this.BaiDumap();
            　　  }
            },
            /**
             * 定位功能，根据地址信息匹配经纬度，进行微信地图定位
             */
            location: function(){
                var that = this;
                console.log('CardDetails',this.CardDetails.CardCompanyAddress);
                // var url = location.href.split('#')[0];
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                let url='';
                if (isAndroid) {
                    url=location.href;
                }
                if (isIOS) {
                    url=location.href.split('#')[0];  //hash后面的部分如果带上ios中config会不对
                }
                console.log('url:',url);
                var myGeo = new BMap.Geocoder();
                myGeo.getPoint(this.CardDetails.CardCompanyAddress, function(point){
                    console.log(point)
                    if (point && point != null) {
                        that.$post(that.$path + '/index.php/api/v2/getJsapiTicket', {url: url}).then((res) => {
                            if(res.code == 200){
                                wx.config({
                                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                    appId: res.data.appid, // 必填，公众号的唯一标识
                                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                                    nonceStr: res.data.noncestr, // 必填，生成签名的随机串
                                    signature: res.data.signature,// 必填，签名
                                    jsApiList: ['checkJsApi', 'openLocation'] // 必填，需要使用的JS接口列表
                                });
                                wx.ready(function(){
                                    console.log('ready','进来了');
                                    wx.checkJsApi({
                                        jsApiList: ['openLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                                        success: function(res) {
                                            console.log('检测',res)
                                            // 以键值对的形式返回，可用的api值true，不可用为false
                                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                                        }
                                    });
                                    wx.openLocation({
                                        latitude: point.lat, // 纬度，浮点数，范围为90 ~ -90
                                        longitude: point.lng, // 经度，浮点数，范围为180 ~ -180。
                                        name: '这是' + that.CardDetails.CardName + '的定位，你还想我写点什么？', // 位置名
                                        address: that.CardDetails.CardCompanyAddress, // 地址详情说明
                                        scale: 5, // 地图缩放级别,整形值,范围从1~28。默认为最大
                                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                                    });
                                });

                            }
                        })
                    }else{
                        that.$openTips({
                            text: '对方地址不详',
                            time: 1000
                        })
                    }
                }, "");

            },
            BaiDumap:function(){   
                console.log('进来了百度地图');
                this.$router.push({path:'/Map',query:{address:this.CardDetails.CardCompanyAddress}});
                // 百度地图API功能
                // var map = new BMap.Map("app");
                // var point = new BMap.Point(116.331398,39.897445);
                // map.centerAndZoom(point,12);
                // map.centerAndZoom(this.CardDetails.CardCompanyAddress,11);
                // console.log(map);
                // console.log('point',point);
                // var geolocation = new BMap.Geolocation();
                // console.log('geolocation',geolocation);
                // geolocation.getCurrentPosition(function(r){
                //     console.log('r',r);
                //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
                //         var mk = new BMap.Marker(r.point);
                //         // console.log('mk',mk);
                //         map.addOverlay(mk);
                //         map.panTo(r.point);
                //         // alert('您的位置：'+r.point.lng+','+r.point.lat);
                //         // alert('您的位置:'+r.address.province + ',' + r.address.city);
                //     }
                //     else {
                //         alert('failed'+this.getStatus());
                //     }        
                // },{enableHighAccuracy: true})
                //关于状态码
                //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
                //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
                //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
                //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
                //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
                //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
                //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
                //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
                //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)
            },
             //获取标签列表
            getLabellist(c_id){
                let that = this;
                that.$fetch(that.$path + '/index.php/api/c/label/'+c_id).then((response) => {
                    that.tags = response.data;
                    console.log('获取标签列表',response);
                })
            },
            //获取当前企业的详细内容
            checkCollect: function(){
                var that = this;
                if(!that.Card.user_id == 0 && !that.Card.access_token == ''){
                    console.log('check')
                    var data = that.Card;
                    data.module = 3;
                    data.module_id = that.card_id;
                    this.$post(this.$path + '/index.php/api/collection/checkCollection', data).then((response) => {
                        if(response.code == 200){
                            that.isCollect = response.data;
                        }
                    })
                }
            },
            /**
             * 加入收藏
             */
            addCollect: function(){
                var that = this;
                if(this.Card.user_id == 0 || this.Card.access_token == ''){
                    this.$openTips({
                        text: '请先登陆',
                        time: 2000
                    }) 
                    this.$router.push({
                        path: '/login',
                    })
                }else{
                    var data = this.Card;
                    data.module = 3;
                    data.module_id = that.card_id;
                    this.$post(this.$path + '/index.php/api/collection/addCollection', data).then((response) => {
                        if(response.code == 200){
                            that.$openTips({
                                text: response.msg,
                                time: 1000
                            })
                            that.isCollect = true;
                            that.dropintopShow = false;
                        }
                    })
                }
            },
            /**
             * 移除收藏
             */
            removeCollect: function(){
                var that = this;
                if(this.Card.user_id == 0 || this.Card.access_token == ''){
                    this.$openTips({
                        text: '请先登陆',
                        time: 2000
                    }) 
                    this.$router.push({
                        path: '/login',
                    })
                }else{
                    var data = this.Card;
                    data.module = 3;
                    data.module_id = that.card_id;
                    this.$post(this.$path + '/index.php/api/collection/removeCollection', data).then((response) => {
                        if(response.code == 200){
                            that.$openTips({
                                text: response.msg,
                                time: 1000
                            })
                            that.isCollect = false;
                            that.dropintopShow = false;
                        }
                    })
                }
            },
            /**
             * 获取名片详情
             */
            getcarddetail() {
                this.$post(this.$path + '/index.php/api/CardDetails/' + this.card_id,  {user_id: this.Card.user_id}).then((response) => {
                // 初始化数据
                if (response.code == 200) {
                    this.CardDetails = response.data;
                    // 是否显示模块
                    if (response.data.module.tag !== '0') {
                        this.isShowTag = true;
                    } else {
                        this.isShowTag = false;
                    }
                    if (response.data.module.product !== '0') {
                        this.isShowProduct = true;
                    } else {
                        this.isShowProduct = false;
                    }
                    if (response.data.module.news !== '0') {
                        this.isShowNews = true;
                    } else {
                        this.isShowNews = false;
                    }

                    //新添加
                    this.getLabellist(response.data.c_id);
                }
        
                })
                // console.log(Object.keys(this.addModuleList))
            },
            /*********名片基本信息*********/
            beforeAvatarUpload: function() {
        
            },
            /**
                 * 头像上传后回调
                 */
            handleAvatarSuccess: function(e) {
                console.log(e.path);
                this.CardDetails.CardLogo = e.path;
                var data = this.Card;
                data['CardLogo'] = e.path;
                this.$post(this.$path + '/index.php/api/editCardLogo/' + this.card_id, data).then((response) => {
                console.log(response);
        
                })
            },
            // 去查看企业
             btn_more(c_id) {
                if(this.$system != 'ios'){
                    this.$router.push({
                        path: '/userCenter/companyIndex',
                        query: {
                            cp_id: c_id
                        }
                    })
                }else{
                     window.location.href = '/userCenter/companyIndex?cp_id=' + c_id;
                }       
            }, 
            //点击商品查看详情
            jumpProduct(val){
              console.log(val);
              this.$router.push({
                  path: '/productDetail',
                  query: {id: val}
              })
            },
            //点击新闻详情
            newsdetailClick(val) {
                this.$router.push({ path: '/newsDetail',query: {id: val}});
            },
            /**
             * 分享开关
             */
            showFunc() {
              if (this.position == '-2.66rem') {
                this.position = '-0.55rem';
              } else {
                this.position = '-2.66rem'
              }
            },
            // 点击更多进产品列表
            cardProduct() {
                this.$router.push({ path: '/ProductList'});
            },
            // 点击更多进新闻列表
            cardNews() {
                this.$router.push({ path: '/newsList'});
            },
            // 点击更多进生成名片
            wantMain() {
                this.$router.push({ path: '/createCard'});
            },
        },
        components: {
            headerSearch,
            soFooter,
            share,
            shareTopage
        }
    }
</script>

<style>
/* 名片式的模块 */
.look_container {
  width: 7rem;
  margin: 0 auto;
  border-radius: 4px;
}
.main_card_index {
    height: 4.4rem;
}
/* 头部浮层底部的红色部分 */
.main_card_index .main_card_index_info-top {
    height: 2.16rem;
    width: 100%;
    background-color: #e50838;
    position: absolute;
    top: 0;
    left: 0;
}
/* 头部浮层信息 */
.main_card_index .main_card_index_info {
    width: 7rem;
    height: 4.2rem;
    background-color: #fff;
    border-top-left-radius: 20px;
    position: absolute;
    left: 50%;
    margin-left: -3.5rem;
}
.main_card_index_info .main_card_index_info_top img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    float: left;
    margin: 0.3rem;
    box-sizing: border-box;
}
.main_card_index_info_top .main_card_index_info_center {
    float: left;
    text-align: left;
    width: 70%;
    margin-top: 0.46rem;
    box-sizing: border-box;
}
.main_card_index_info_center h2 {
    font-size: 0.34rem;
    color: #000;
    height: 0.48rem;
    line-height: 0.48rem;
}
.main_card_index_info_center h2 span {
    font-size: 0.28rem;
    color: #333;
    display: inline-block;
    max-width: 1.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.main_card_index_info_center h2 span:first-child {
    font-size: 0.34rem;
    color: #333;
    max-width: 3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
.main_card_index_info_center p {
    font-size: 0.28rem;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    width: 4.9rem;
    height: 0.48rem;
    line-height: 0.48rem;
}
/* .main_card_index_info_top .main_card_index_info_right {
    float: right;
    box-sizing: border-box;
    font-size: 0.28rem;
} */
/* 头部浮层底部 */
.main_card_index_info_bottom {
    border-top: 1px solid #d8d8d8;
    padding: 0.3rem;
    box-sizing: border-box;
}
.main_card_index_info_bottom p {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
    height: 0.56rem;
}
.main_card_index_info_bottom p a {
    font-size: 0.28rem;
    color: #e50838;
}
.main_card_index_info_bottom p .icon-youxiang,
.main_card_index_info_bottom p .icon-dizhi1,
.main_card_index_info_bottom p .icon-dianhua2 {
    width: 0.36rem;
    height: 0.36rem;
    background-color: #e50838;
    font-size: 0.22rem;
    color: #fff;
    border-radius: 50%;
    padding: 0.1rem;
    line-height: 0.36rem;
    box-sizing: border-box;
    text-align: center;
}
.main_card_index_info_bottom p .small_span_color {
    background-color: #e50838;
    padding: 0.08rem;
    border-radius: 2px;
    color: #fff;
    font-size: 0.22rem;
    margin-left: 0.2rem;
    display: inline-block;
    box-sizing: border-box;
    line-height: 0.24rem;
}
.main_card_index_info_bottom p .icon-erweima {
    font-size: 0.4rem;
    color: #999;
}

/* 访问头条 */
.main_Headline_data {
    width: 7rem;
    background-color: #fff;
    margin: 0 auto;
    padding: 0.1rem 0;
    height: 0.6rem;
    line-height: 0.6rem;
    margin-bottom: 0.2rem;
}
.main_Headline_data small{
    color: #999;
    font-size: 0.36rem;
    transform: scale(0.56);
    display: block;
    line-height: 0.44rem;
    float: left;
    margin: 0 -0.315rem;
}
.main_Headline_data small em {
    color: #e50838;
}
.main_Headline_data .data_jin {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    padding: 0 0.1rem;
    margin-top: -0.1rem;
    height: 0.6rem;
    line-height: 0.6rem;
    box-sizing: border-box;
    text-align: center;
}

/* 公司简介 */

.main-company-index-description {
	padding-bottom: 0.2rem;
    background-color: #fff;
}
.main-company-index-description .option_description {
	display: flex;
	justify-content: flex-start;
	padding: 0 0.2rem;
}
.main-company-index-description .option_description .userCard_check_img {
    width: 0.7rem;
    height: 0.7rem;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-right: 0.4rem;
}
.main-company-index-description .option_description img{
	width: 0.7rem;
    height: 0.7rem;
    max-width: 100%;
    max-height: 100%;
    vertical-align: super;
}
.main-company-index-description .option_description h3 {
	font-size: 0.34rem;
	color: #333;
	line-height: 0.36rem;
}
.main-company-index-description .option_description p {
	font-size: 0.18rem;
	color: #999;
	padding: 0;
	line-height: 0.46rem;
}
.main-company-index-description .company_description {
    border: 1px dashed #d8d8d8;
    height: auto;
    line-height: 0.42rem;
    margin: 0 .2rem;
    padding: 0.1rem;
		
}
.main-company-index-description p {
    font-size: 0.26rem;
    color: #333;
    text-align: left;
    padding: 0.2rem;
}
.option_tagNames {
    margin: 0;
    padding: 0 .2rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.1rem;
}
.option_tagNames span {
    font-size: .22rem;
    background-color: #999;
    color: #fff;
    float: left;
    margin-right: .1rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    display: inline-block;
    text-align: center;
    /* height: 0.36rem; */
    line-height: 0.46rem;
}
/* 查看更多企业信息 */ 
.btn_more {
    font-size: 0.26rem;
    color: #e50838 !important;
    display: block;
    padding-bottom: 0.2rem;
    background-color: #fff;
    margin-top: -0.2rem;
    padding-top: 0.2rem;
}
/* 企业商品 */
.main-company-index_product {
	background-color: #fff;
	margin-top: 0.2rem;
}
.main-company-index_product .hui_title {
    width: 2.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

#js_host_item {
  padding: 0.12rem;
}
#js_host_item ul>li {
  margin-right: 0;
}
#js_host_item img {
  width: 2rem;
  height: 2rem;
}
/* 产品为空 */
#js_host_item .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
#js_host_item .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
#js_host_item .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}

.host_item small {
  width: 2.24rem;
  height: 2.24rem;
  vertical-align: middle;
  text-align: center;
  margin-bottom: 0.1rem;
}
.host_item small img {
  width: 2.2rem;
  height: 2.2rem;
  max-width: 100%;
  max-height: 100%;
}


/* 新闻动态 */
.info_list_home_page ul>li {
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem;
    box-sizing: border-box;
}
.info_list_home_page ul>li .new_info_single_img {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
  text-align: center;
  vertical-align: middle;
}
.info_list_home_page ul>li .new_info_single_img img {
  width: 1.2rem;
  height: 1.2rem;
  max-width: 100%;
  max-height: 100%;
}

/* .info_list_home_page ul>li img {
    width: 1.2rem;
    display: inline-block;
    height: 100%;
    float: left;
    margin-right: 0.2rem;
} */
.info_list_home_page ul>li p {
    font-size: .28rem;
    color: #333;
    text-align: left;
}
.info_list_home_page ul>li p:last-child {
    font-size: .22rem;
    color: #999;
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 75%;
    bottom: 0.2rem;
    right: 0.2rem;
}

/* 新闻为空 */
.info_list_home_page .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
.info_list_home_page .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
.info_list_home_page .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}


/* 多图新闻 */
.info_home_page p {
    font-size: .28rem;
    color: #333;
    text-align: left;
    margin-bottom: 0.2rem;
}
.info_home_page ul {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.3rem;
}
.info_home_page ul>li {
    margin-right: 0.16rem;
    padding: 0 !important;
}
.info_home_page ul>li .new_info_img {
  width: 2.24rem;
  height: 1.46rem;
  margin-right: 0.19rem;
  text-align: center;
  vertical-align: middle;
}
.info_home_page ul>li li:last-child .new_info_img {
  margin-right: 0;
}
.info_home_page ul>li .new_info_img img {
  width: 2.24rem;
  height: 1.46rem;
  max-width: 100%;
  max-height: 100%;
}
.info_home_page ul>li .info_home_img {
    width: 2.04rem;
    height: 1.2rem;
    float: left;
    display: inline-block;
    margin-right: 0.1rem;
}

/* 多图新闻 */
.info_home_page .info_time {
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    left: 0;
    margin-bottom: -0.2rem;
    line-height: 0.4rem;
    padding: 0 0.2rem;
} 
/* 底部制作的两个按钮 */
.metoo_btn {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0.4rem;
}
.metoo_btn a {
  flex: 1;
  margin: 0.2rem;
  font-size: 0.3rem;
  padding: 0.2rem 0.6rem;
  background-color: #e50838;
  border-radius: 4px;
  outline: none;
  border: 0;
  box-sizing: border-box;
}
.metoo_btn button {
  color: #fff;
}
/* 分享按钮 */
.view_card_share {
    position: fixed;
    height: 2rem;
    width: 3rem;
    font-size: 0.26rem;
    display: flex;
    top: 50%;
    margin-top: -1.5rem;
}
.view_card_share .share_hide_btn {
    width: .8rem;
    height: .6rem;
    border-radius: 50% 0 0 50%;
    border-left: 1px solid #999;
    text-align: left;
    background-color: #fff;
    line-height: 0.6rem;
    top: 54%;
    position: absolute;
    z-index: 100;
    color: #e50838;
}
.share_hide_collection {
    margin-left: .6rem;
    color: #333;
    position: absolute;
    top: 36% !important;
    z-index: 100;
}
.share_hide_collection .hide_collection {
    margin: .08rem 0;
    border: 1px solid #ccc;
    background-color: #fff;
    line-height: .3rem;
    border-radius: .28rem;
    padding: 0.1rem 0.4rem;
}
.share_hide_collection .hide_collection .icon-shoucang {
  color: #e50838;
  margin-right: 0.12rem;
}
.share_hide_collection .hide_collection .icon-fenxiang2 {
  color: #ff9933;
  margin-right: 0.12rem;
}

/* 分享引导 */
/* .Share_guidance {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../common/images/share.png') no-repeat;
    background-size: cover;
    z-index: 100;
    opacity: 0.8;
} */

/* 二维码遮罩层 */
.intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.intop img {
    width: 30%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15%;
    margin-top: -15%;
    z-index: 12;
}

/* 下拉框 */
.drop_intop_panel {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 16;
}
.dropDownpanel {
    width: auto;
    height: auto;
    background-color: #fff;
    position: absolute;
    top: 0.88rem;
    right: 0.16rem;
    z-index: 15;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(211, 125, 125, 0.34);
}
.dropDownpanel .dropdown_triangle {
    width: 0;
    height: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    right: 0.13rem;
    top: -0.14rem;
    z-index: 15;
}
.dropDownpanel a {
    font-size: 0.3rem;
    color: #333;
    display: block;
    line-height: 0.92rem;
    height: 0.92rem;
    text-align: left;
    padding: 0 0.2rem;
}
.dropDownpanel a .icon-icon,
.dropDownpanel a .icon-shoucang1,
.dropDownpanel a .icon-fenxiang4,
.dropDownpanel a .icon-fenxiang2 {
    font-size: 0.36rem;
	margin-right: 0.12rem;
}
.dropDownpanel a .icon-fenxiang2 {
  color: #ff9933;
}
.dropDownpanel a .icon-shoucang1 {
    color: #e50838;
}

</style>